<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			.mui-title {
				color: #077DFF;
			}
			
			.fiends-div {
				width: 100%;
				background-color: #FFFFFF;
				border-bottom: 1px solid #F7F7F7;
				padding: 2% 0;
				display: flex;
			}
			
			.fiends-div .friend-heddimg {
				width: 12%;
				margin-right: 5%;
				margin-left: 5%
			}
			
			.fiends-div .agree-button {
				padding: 0;
				position: absolute;
				right: 3%;
				background-color: #F564AD;
				border: 0;
				margin-top: 2.5%;
				padding: 1% 3%;
				font-size: 60%;
				color: #FFFFFF;
			}
			
			.text-div {
				display: flex;
				flex-wrap: wrap;
				font-size: 90%;
			}
			
			.card-div {
				display: none;
			}
			
			.text-div text {
				width: 100%;
				font-size: 80%;
				color: #808080
			}
			
			.ul-content {
				padding: 0;
				margin-top: 0;
			}
			
			.ul-content li {
				list-style: none
			}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav" id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" id="backicon"></a>
			<h1 class="mui-title">我的关注</h1>
		</header>

		<div class="mui-content" id="mui-content">
			<!--列表渲染处-->
			<ul class="ul-content" id="ul-content">

			</ul>

		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/immersed.js"></script>
		<script src="../../js/arttmpl.js"></script>
		<script type="text/javascript">
			mui.init();

			window.onload = function() {
				mui.plusReady(function() {
					starbar();
					plus.navigator.setStatusBarStyle('dark');

					//点击返回事件
					var old_back = mui.back;
					mui.back = function() {
						old_back();
						plus.navigator.setStatusBarStyle('light');
					}
					
					//渲染出自己关注的用户
					mui.ajax({
						url: 'https://www.lunyuwang.com/friendListController/followList',
						data: {
							lyuser_Card: plus.storage.getItem("card")
						},
						async: true, //将false改为true
						crossDomain: true, //强制使用5+跨域
						dataType: 'json', //服务器返回json格式数据
						type: 'get', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						//processData: false,
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: function(data) {
							var reecord = data.followList;
							if(reecord == '0'){
								return ;
							}
							var str = template('friends-list', {
								"record": reecord
							});
							document.getElementById('ul-content').innerHTML = str;
							var viewwidth = document.body.clientWidth;
							var headimg = document.getElementsByClassName('fiends-div');
							var num = document.getElementsByClassName('fiends-div').length;
							for(var i = 0; i < num; i++) {
								headimg[i].getElementsByTagName('img')[0].style.height = "-webkit-calc(" + viewwidth * 0.12 + "px)";
							}
						},
						error: function(xhr, type, errorThrown) { //异常处理；
							mui.alert("失败了!")
						}
					})

					//点击取消关注事件
					var obj_lis = document.getElementsByClassName('fiends-div');
					mui("#ul-content").on('longtap', ".li-content", function() {
						//mui.alert(this.getElementsByTagName('text')[0].textContent);
						var _this = this;
						mui.confirm('确认取消关注？', function(e) {
							if(e.index == 0) {
								
								
							}
						})
					})
				})
			}
		</script>

		<!--列表渲染模板-->
		<script type="text/template" id="friends-list">
			<% for(var i in record){ var item=record[i]; %>
			<li class="li-content">
				<div id="fiends-div" class="fiends-div">
					<img src="<%=item.lyuser_FacePath%>" class="friend-heddimg" />
					<div class="text-div">
						<%=item.lyuser_NickName%>
						<text><%=item.lyuser_Major%></text>
					</div>
					<button class='agree-button'><text class="card-div"><%=item.lyfollowed_Card%></text><text class="card-div"><%=item.l%></text>取消关注</button>
				</div>
			</li>
			<% } %>
		</script>
	</body>

</html>